<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>添加用户 - 电动车销售系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/purchase.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/admin/adduser.css">
</head>
<body>
<header class="dashboard-header">
  <div class="container">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h1 class="h3 mb-0"><i class="bi bi-bicycle"></i> 电动车销售管理系统</h1>
        <p class="mb-0 opacity-75">系统管理员工作台</p>
      </div>
      <div class="d-flex align-items-center">
        <div class="me-3">
          <span class="d-none d-md-inline">${currentUser.name}</span>
          <div class="badge bg-light text-dark">
            <i class="bi bi-person-circle me-1"></i>
            <c:choose>
              <c:when test="${currentUser.role == 4}">系统管理员</c:when>
              <c:when test="${currentUser.role == 0}">业务员</c:when>
              <c:when test="${currentUser.role == 1}">仓库管理员</c:when>
              <c:when test="${currentUser.role == 2}">销售管理员</c:when>
              <c:when test="${currentUser.role == 3}">售后管理员</c:when>
            </c:choose>
          </div>
        </div>
        <div class="dropdown">
          <button class="btn btn-light rounded-circle p-1" type="button" data-bs-toggle="dropdown">
            <i class="bi bi-gear fs-5"></i>
          </button>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="${pageContext.request.contextPath}/change_password.jsp"><i class="bi bi-lock me-2"></i> 修改密码</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item text-danger" href="${pageContext.request.contextPath}/LogoutServlet"><i class="bi bi-box-arrow-right me-2"></i> 退出登录</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>

<div class="container my-4">
  <div class="row">
    <div class="col-lg-8 mx-auto">
      <div class="card shadow-lg">
        <div class="card-header bg-primary text-white py-3">
          <div class="d-flex justify-content-between align-items-center">
            <h5 class="m-0"><i class="bi bi-person-plus me-2"></i>添加新用户</h5>
            <a href="${pageContext.request.contextPath}/UserListServlet?clearMessages=true"
               class="btn btn-light">
              <i class="bi bi-arrow-left me-1"></i> 返回列表
            </a>
          </div>
        </div>

        <div class="card-body p-4">
          <c:if test="${not empty errorMsg}">
            <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
              <i class="bi bi-exclamation-triangle me-2"></i> ${errorMsg}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          </c:if>

          <form action="${pageContext.request.contextPath}/AddUserServlet" method="post">
            <input type="hidden" id="roleInput" name="role" value="0">

            <div class="mb-4">
              <label class="form-label fw-bold">用户名 <span class="text-danger">*</span></label>
              <input type="text" class="form-control form-control-lg" name="name" required
                     placeholder="输入用户名" autocomplete="off">
              <div class="form-text">用户名必须是唯一的，长度在3-20个字符之间</div>
            </div>

            <div class="mb-4">
              <label class="form-label fw-bold">密码 <span class="text-danger">*</span></label>
              <div class="password-container">
                <input type="password" class="form-control form-control-lg" id="passwordInput"
                       name="password" value="123456" required>
                <span class="password-toggle" id="passwordToggle">
                  <i class="bi bi-eye"></i>
                </span>
              </div>
              <div class="form-text">
                <div class="d-flex justify-content-between align-items-center mt-2">
                  <span>系统默认初始密码为123456</span>
                  <button type="button" class="btn btn-sm btn-outline-secondary" id="generatePassword">
                    <i class="bi bi-shuffle me-1"></i> 生成随机密码
                  </button>
                </div>
              </div>
            </div>

            <div class="mb-4">
              <label class="form-label fw-bold">用户角色 <span class="text-danger">*</span></label>
              <p class="text-muted">选择新用户的系统角色</p>
              <div class="row g-3">
                <div class="col-md-4">
                  <div class="role-card selected" data-role="0">
                    <div class="text-center p-3">
                      <div class="role-badge role-sales">业务员</div>
                      <h6 class="mt-2 mb-1">业务员</h6>
                      <p class="text-muted small mb-0">负责销售业务</p>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="role-card" data-role="1">
                    <div class="text-center p-3">
                      <div class="role-badge role-warehouse">仓库管理员</div>
                      <h6 class="mt-2 mb-1">仓库管理员</h6>
                      <p class="text-muted small mb-0">负责库存管理</p>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="role-card" data-role="2">
                    <div class="text-center p-3">
                      <div class="role-badge role-salesadmin">销售管理员</div>
                      <h6 class="mt-2 mb-1">销售管理员</h6>
                      <p class="text-muted small mb-0">负责销售管理</p>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="role-card" data-role="3">
                    <div class="text-center p-3">
                      <div class="role-badge role-aftersales">售后管理员</div>
                      <h6 class="mt-2 mb-1">售后管理员</h6>
                      <p class="text-muted small mb-0">负责售后服务</p>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="role-card" data-role="4">
                    <div class="text-center p-3">
                      <div class="role-badge role-admin">系统管理员</div>
                      <h6 class="mt-2 mb-1">系统管理员</h6>
                      <p class="text-muted small mb-0">负责系统管理</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="d-flex justify-content-end mt-4 pt-3 border-top">
              <button type="reset" class="btn btn-outline-secondary me-3 px-4">
                <i class="bi bi-arrow-counterclockwise me-1"></i> 重置
              </button>
              <button type="submit" class="btn btn-primary px-4">
                <i class="bi bi-person-plus me-1"></i> 添加用户
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 角色卡片选择功能
  document.querySelectorAll('.role-card').forEach(card => {
    card.addEventListener('click', function() {
      // 移除所有卡片的选中状态
      document.querySelectorAll('.role-card').forEach(c => {
        c.classList.remove('selected');
      });

      // 添加当前卡片的选中状态
      this.classList.add('selected');

      // 更新隐藏的输入值
      document.getElementById('roleInput').value = this.getAttribute('data-role');
    });
  });

  // 密码显示/隐藏切换
  document.getElementById('passwordToggle').addEventListener('click', function() {
    const passwordInput = document.getElementById('passwordInput');
    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
    passwordInput.setAttribute('type', type);
    this.innerHTML = type === 'password' ? '<i class="bi bi-eye"></i>' : '<i class="bi bi-eye-slash"></i>';
  });

  // 生成随机密码
  document.getElementById('generatePassword').addEventListener('click', function() {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';
    let password = '';
    for (let i = 0; i < 10; i++) {
      password += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    document.getElementById('passwordInput').value = password;
  });

  // 自动关闭消息提示
  document.querySelectorAll('.alert .btn-close').forEach(button => {
    button.addEventListener('click', function() {
      this.closest('.alert').style.display = 'none';
    });
  });

  // 5秒后自动关闭消息提示
  setTimeout(() => {
    document.querySelectorAll('.alert').forEach(alert => {
      alert.style.display = 'none';
    });
  }, 5000);
</script>
</body>
</html>